import React from 'react';
import styles from './mine_all.less';
import moment from 'moment';
import {add,mul} from '../../../utils/MyMath';
import { SwipeAction, List } from 'antd-mobile';
import { getData,addSessionData } from '../../../utils/localData'
export default class OrderItem extends React.Component {

    constructor() {
        super()
        this.state = {
          time:''
        }
    }

    timer = false

    renderContent = tab =>
  {
    let list = tab.map((item,i)=>{
      return(
      <img key={"img"+i} src={item.imgUrl} alt="" className={styles.mine_imgl} />)
      }
    )
    if(list.length>3){
      return (list.slice(0,3))
    }
    return ( list )
  }
  renderBtn = (item,timeText) => {
    if(item.orderStatus==7){
      if(item.commentStatus==0){
        return (<button onClick={()=>{
            this.props.history.push({
              pathname:"/Mine_evaluation",
              orderId:item.orderId
            })
          }
        } className={styles.mina_bri}>去评价</button>)
      }else{
        return (<div className={styles.mina_ble}>已评价</div>)
      }
    }else if(item.orderStatus==1){
      if(timeText===''){
        return(<div className={styles.mina_ble}>订单已过期</div>)
      }else{
        return (<button className={styles.mina_bri2} onClick={()=>{
                window.YLJsBridge.call(
                    'pay',
                    {orderId:item.orderNum},
                    (data)=>{
                        addSessionData("myOrderId",item.payOrderId)
                        this.props.history.push({
                        pathname:"/Mine_details",
                        //orderId:order.orderId,
                        })
                    }
                )
            }} >去支付(还剩{timeText})</button>)
      }
    }else{
      return (<div className={styles.mina_ble}></div>)
    }
  }


    render(){
        let {order} = this.props
        let state = ''
        switch (order.orderStatus) {
          case -1:
            state = '已取消'
            break;
          case 1:
            state = '等待付款'
            break;
          case 2:
            state = '等待商家确认'
            break;
          case 4:
            state = '待取衣'
            break;
          case 5:
            state = '待洗衣'
            break;
          case 6:
            state = '待送达'
            break;
          case 7:
            state = '已完成'
            break;
          default:
            break;
        }
        
        let end = order.paymentExpireTime
        let now = new Date().getTime();
        let ss = end - now; //目标时间和现在的时间差
        let timeText
        if(ss > 0){
          let minutes = Math.floor(ss/1000/60%60);
          let seconds = Math.floor(ss/1000%60);
          if(minutes<10)minutes = "0"+minutes;
          if(seconds<10)seconds = "0"+seconds;
          timeText = minutes+"分"+seconds+"秒";
        }else{
            timeText = ''
        }
        let scount = 0;
        order.commodityList.forEach(item => {
          scount = add(scount, item.buyNum)
        });
        console.log("计数===",scount)
        return(
        <div>
        <div className={styles.mina_line}></div>
        <div className={styles.mina_eve}>
            <div className={styles.mina_top}>
                <div className={styles.mina_tle}>{moment(order.createTime).format("YYYY-MM-DD HH:mm:ss")}</div>
                <div className={styles.mina_tri}>
                  {state}
                </div>
            </div>
            <SwipeAction
              //disabled={(order.orderStatus===1||order.orderStatus===-1)?false:true}
              style={{ backgroundColor: 'gray' }}
              autoClose
              right={[
                {
                  text: order.orderStatus===1?'取消订单':'删除订单',
                  onPress: () => {
                    console.log(order.orderId)
                    const { dispatch } = this.props
                    let user = JSON.parse(getData("userInfo"))
                    let pageSize = Math.ceil(this.props.index/10)
                    if(pageSize===0)pageSize++
                    dispatch({
                      type: order.orderStatus===1?'orders/cancelOrder':'orders/deleteOrder',
                      payload: {
                        selQs:{
                          userId:user.userId,
                          page:1,
                          pageSize:pageSize*10
                        },
                        cancelQs:{
                          orderId:order.orderId,
                          orderNum:order.orderNum,
                          userId:user.userId
                        }
                      }
                    })
                  },
                  style: { backgroundColor: '#F4333C', color: 'white' ,height:'97%',marginTop:"2%",marginRight:"1%"},
                },
              ]}
              //onOpen={() => console.log('global open')}
              //onClose={() => console.log('global close')}
            >
              <div
                //extra={"共"+order.commodityList.length+"件"}
                //arrow="horizontal"
                className={styles.mina_list}
                activeStyle={false}
                onClick={e => {
                    addSessionData("myOrderId",order.orderId)
                    console.log(this.props)
                    this.props.history.push({
                      pathname:"/Mine_details",
                      //orderId:order.orderId,
                    })
                  }
                }
              >
              {/*<div className={styles.mina_cenouy}>*/}
                <div className={styles.mina_cen}>
                  {/*<div className={styles.mina_cle}>*/}
                      {this.renderContent(order.commodityList)}
                  {/*</div>*/}
                </div>
                <div className={styles.mina_ceninn}>
                   <span className={styles.mine_allnum}>共{scount}件</span>
                   <img src="./img/in.png" alt="" className={styles.mine_img0} />
                </div>
                {/*</div>*/}
              </div>

            </SwipeAction>

            <div className={styles.mina_bot}>
                <div className={styles.mina_ble}>实付:<span className={styles.mina_blein}>￥{order.actualAmountMoney}</span>  </div>
                {this.renderBtn(order,timeText)}
            </div>
        </div>
      </div>)
    }

    componentDidUpdate(){
        console.log("更新。。。")
        // if(this.timer){
        //     clearInterval(this.timer)
        // }
    }

    componentDidMount(){
        let {order} = this.props
        if(order.orderStatus === 1){
            let end = order.paymentExpireTime
            let now = new Date().getTime();
            let ss = end - now; //目标时间和现在的时间差
            if(ss > 0){
                this.state.time = order.paymentExpireTime
                this.timeCount()
            }else{
                if(this.timer){
                    clearInterval(this.timer)
                }
            }
        }
    }

    componentWillUnmount(){
        if(this.timer){
          clearInterval(this.timer)
        }
    }
    timeCount(){
        this.timer = setInterval(()=>{
            this.setState({time:this.state.time})
        },1000)
    }
}
